<%@ page import="com.googlecode.objectify.Objectify" %>
<%@ page import="com.mincko.minckotest.shared.Image" %>
<%@ page import="com.mincko.minckotest.PMF" %>
<%@ page import="java.util.Hashtable" %>
<%@ page import="java.util.Enumeration" %>

<%
String websiteComponentIdentifier = request.getParameter("id");
 //listing the table
 Objectify ofy = PMF.getObjectify();
%>

<html>
<header>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="javascript/jquery-ui-1.8.19.custom.min.js"></script>
<script type="text/javascript" src="javascript/jquery.form.js"></script>
<script type="text/javascript" src="javascript/minckopopup.js"></script>
<link rel="stylesheet" href="css/mincko.css">
<script type="text/javascript">	
var delay = 1000
var checkDelArray = [];
var undoText = "Undo Delete"
//allow the user to save the changes and objectify
var  webComponentIdentifier = "<%= websiteComponentIdentifier %>"
	
$(document).ready(function() 
{ 
		$('#slideshow_id').live('change', function()	{
			var id = $('#slideshow_id').val()
			if(id)
				getImageList(id);
				//window.location.search="id="+id
	 	
		});
		
		//hide the deleted image
		$('.check_delete').live('change', function()	{
			if($(this).is(':checked')){
				checkDelArray.push($(this));
				$('#undoDelete').text(undoText+"("+ checkDelArray.length +")").show(delay);
				$(this).parents('div.imageHolder').hide(delay)
			}else
				$(this).parents('div.imageHolder').show(delay)
		});
		//retrieving images
		getImageList(webComponentIdentifier);
		
});

//to get the list of image
function getImageList(id){
	$("#imageList").html(''); //clear the images;
	 $.getJSON("getImages?id="+ id, function(data) {
    	$.each(data, function(key, img) {
    	      //$("#imageList").append("src", item.media.m).appendTo("#images");
    		var imgHolder = $("<div class='imageHolder'></div>");
    		imgHolder.append("<img src='/serve?blob-key="+ img.blobKey +"'>");
    		imgHolder.append("<input type='hidden' id='imageId' value='"+img.id+"'><br/>");
    		imgHolder.append("<div class='divInput'><textarea id='description'>"+img.description+ "</textarea></div>");
    		imgHolder.append("<div class='divInput'>Delete?<input type='checkbox' class = 'check_delete' id='delete_"+img.id+"'></div>");
			imgHolder.append("<input type='hidden' id='order' value='"+img.order+"'>");
			$("#imageList").append(imgHolder);
		});
    });
	webComponentIdentifier = id;
	checkDelArray = [];
	$('#messageDiv').hide();
	$('#undoDelete').hide();
}

//initializing the sortable object
$(function() {
	$( "#imageList" ).sortable();
	$( "#imageList" ).disableSelection();
});

//undo the delete in seq. Last in last out
function undoDelete(){
	if(checkDelArray.length > 0){
		checkDelArray[checkDelArray.length-1].trigger('click')
		checkDelArray.splice(checkDelArray.length-1);
		$('#undoDelete').text(undoText+"("+ checkDelArray.length +")");
		//hide this if no more
		if(checkDelArray.length <= 0) $('#undoDelete').hide(delay);
	}
}

function submitSave()
{
    var obj = $('.imageHolder');
    var arr = $.makeArray(obj);
    var strJson ="";
    var strJsonDelete = "";
    var count = 1;
	var arrJson = [];
    var arrJsonDelete = [];
    //building the json
    $.each(arr, function(key, value) { 
    	  var id = $(value).find('input[id="imageId"]').val();
    	  var order = $(value).find('input[id="order"]').val();
    	  var desc = $(value).find('textarea[id="description"]').val();
    	  var toDelete = $(value).find('input[id="delete_'+ id +'"]').is(':checked')
    	  var arrTemp = {id:id, webComponentIdentifier: webComponentIdentifier, order:  (count++), description: desc  }
    	  if(!toDelete)arrJson.push(arrTemp) //for saving
    	  else arrJsonDelete.push(arrTemp) //to delete
    	  
   	});
	$('#messageDiv').hide();
	$('#undoDelete').hide(delay);
	checkDelArray = []; //remove old check
    var jsonDelete = arrJsonDelete.length > 0  ? ( JSON.stringify({'imgList': arrJsonDelete }) ) : "";
    var jsonSend = JSON.stringify({'imgList': arrJson }) 
	$.ajax({
		  type: "POST",
		  url: "saveImage",
		  data: { jsonData: jsonSend, jsonDelete: jsonDelete}
		}).done(function( msg ) {
			$('#messageDiv').text( "Saving completed").css("background","white").show(delay);
		}).fail(function( msg ) {
			$('#messageDiv').text( "Error in saving").css("background","red").show(delay);
		}); 
}

//to open the upload page
function uploadPage(){
	//centering with css
	centerPopup();
	//load popup
	loadPopup();
	$('#uploadFrameDiv').html('<iframe width="100%" height="600" id="uploadFrame" '+
							'frameborder="0" src="upload.jsp?id='+ webComponentIdentifier +'"></iframe>');
    $('iframe').bind('refreshList', function() {
    	getImageList(webComponentIdentifier);
	});

}

</script> 	
</header>

<body>
<br>
<div class='page'>
<div class="content">
Open (for dev's use): <select id="slideshow_id" name="slideshow_id">
		<option value=""></option>
<%
	com.googlecode.objectify.Query<Image> q = ofy.query(Image.class);
	Hashtable<String, String> ht = new Hashtable();
	for (Image img: q) {
		if(img.webComponentIdentifier!=null)
			ht.put(img.webComponentIdentifier,img.webComponentIdentifier);
    } 

	Enumeration e = ht.keys();
    //iterate through Hashtable keys Enumeration to build the select, for ease of navigation DURING DEVELOPMENT
    //SELECTBOX TO BE REMOVED
    while(e.hasMoreElements()){
    	String key = (String)e.nextElement();
    	out.println("<option value='"+ key +"'>"+ ht.get(key) +"</option>");
    }

%>
</select>
<h1> Slideshow <%= websiteComponentIdentifier %> Maintenance</h1>
	<div id='messageDiv'></div>
	<div id='imageList'>
	</div>
	
	<div id="popupContact">
		<a id="popupContactClose">X</a>
		<div id="uploadFrameDiv">
		</div>
	</div>
	<div class='newLine'>Drag and drop to change order</div><br/>
	<div class='newLine'>
		<button onclick="submitSave()">Save Changes</button>
		<button onclick="uploadPage()" id='uploadButton'>Upload an Image</button>
		<button onclick="undoDelete()" id='undoDelete'></button>
	</div>
	<div id="backgroundPopup"></div>
</div>
</div>
</body>
</html>


